ページの編集確認に役立つ機能の詰め合わせ 拡張機能のSuperDevを使ってみた
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
SuperDevとは
SuperDevは、Chromeの拡張機能になります。
デザイナー、開発者、技術者のためのオープンソースのブラウザツールボックス。開発/デザインにかかる時間を最小限に抑え、Webを手間なくデバッグするための様々なツールを提供します。
https://chrome.google.com/webstore/detail/superdev-design-and-dev-t/jlkikimlceonbmfjieipbonnglnlchhl
これ拡張機能一つで、ドライバーやペンチ、カッターとしても使える工具のように、ページの編集に役立つ機能が詰め込まれています。デザインの参考になるページで、少し見た目を変えてみたいときなどに便利だと思います。
試してみた
早速インストールして使ってみます。12個の機能が存在しており、今回はいくつか試してみました。
Text Editor
ページのテキストを編集することができます。
- 編集前
- 編集後
Delete Element、Move Element
ページの指定した要素を、削除したり、移動することができます。
- Delete Elementでグラフを削除
- Move Elementでアイコンを移動
Color Picker、Color Palette
ホバーしている要素の色や、そのページで使われている色の一覧を取得できます。
- Color Picker
- Color Palette
Page Highlight
CSSボックスモデルを、可視化することができます。
Export Element
指定した要素のHTMLやCSSを取得し、編集することができます。
Clear All Cache
ClearAllCacheボタンで、キャッシュをクリアし、ページを元に戻せます。
まとめ
今回は、便利な拡張機能SuperDevを使ってみました。それぞれの機能が、一つの拡張機能として存在するようなクオリティであり、とても便利なので今後も使っていこうと思います。
ではまた。
